<template>
  <!-- 后台管理我的资源详情父组件 -->
  <!-- 我的资源 -->
  <div class="dashboard-container">
    <div class="dashboard-content">
      <div style="position: relative; float: right; margin-top: -30px">
        <img
          style="position: absolute; left: 60px; top: -20px; right: 0"
          src="@/assets/home/admin/home/manage_top2.png"
          alt=""
        />
        <img src="@/assets/home/admin/home/manage_top1.png" alt="" />
      </div>
      <!-- 顶部标题 -->
      <div class="dashboard-header">
        <icon-title
          title="我的资源"
          fontSize="20px"
          :img-src="require('@/assets/home/admin/home/text_title.png')"
        />
      </div>

      <!-- 统计卡片区域 -->
      <div class="stats-summary">
        <div class="stat-card">
          <div class="stat-label">企业总数</div>
          <div class="stat-number">{{ stats.companyCount }}</div>
        </div>
        <div class="stat-card">
          <div class="stat-label">累计粉丝量</div>
          <div class="stat-number">{{ stats.totalFans }}</div>
        </div>
        <div class="stat-card">
          <div class="stat-label">已购买模版</div>
          <div class="stat-number">{{ stats.templateCount }}</div>
        </div>
      </div>
      <!-- 新建企业按钮和搜索框 -->
      <div class="company-list-container">
        <div
          class="create-company-section"
          style="border-bottom: 1px solid #cccccc; padding-bottom: 36px"
        >
          <CustomButton text="新建企业" type="primary" @click="createCompany" />
          <span style="padding-left: 20px">企业名称</span>
          <el-input
            v-model="searchKeyword"
            placeholder="输入企业名称"
            size="small"
            class="search-input"
            @keyup.enter.native="searchCompanies"
          />
          <CustomButton
            text="搜索"
            type="primary"
            size="small"
            @click="searchCompanies"
          />
        </div>
        <!-- 企业列表 -->
        <div
          class="company-list"
          v-for="(company, index) in companies"
          :key="company.id"
        >
          <div class="company-info">
            <span class="f17 bold primary-color">{{ company.name }}</span>
            <span class="f13">创建时间：{{ company.createTime }}</span>
          </div>
          <el-row :gutter="0">
            <!-- 已购买模板信息 -->
            <el-col :span="17">
              <div v-for="(item, index) in company.childrenList" :key="index">
                <div >
                  <el-row style="">
                    <div
                      style="
                        display: flex;
                        align-items: center;
                        margin-bottom: 10px;
                        margin-top: 10px;
                      "
                    >
                      <el-col :span="2">
                        <div class="info-row">
                          <Avatar size="large" :src="item.data.logoUrl" /></div
                      ></el-col>
                      <el-col :span="6">
                        <div class="info-row" style="margin-bottom: 10px">
                          <span class="info-value" style="padding-left: 10px"
                            >{{ item.data.name + "(" + item.data.type + ")" }}{{
                          }}</span>
                          <span
                            class="edit-tag color-back"
                            @click="editOfficialAccountName(item.id)"
                            >修改</span
                          >
                          <el-tooltip placement="top">
                            <div slot="content">
                              <div style="margin-bottom: 6px">
                                <svg-icon
                                  icon="white-circle"
                                  width="10"
                                  height="10"
                                  viewBox="0 0 10 10"
                                  :custom-style="{
                                    transform: 'translateY(-2px)',
                                  }"
                                />
                                <span style="padding-left: 10px"
                                  >个人类型公众号 ：一年内有 2
                                  次修改名称的机会。</span
                                >
                              </div>
                              <div>
                                <svg-icon
                                  icon="white-circle"
                                  width="10"
                                  height="10"
                                  viewBox="0 0 10 10"
                                  :custom-style="{
                                    transform: 'translateY(-2px)',
                                  }"
                                />
                                <span style="padding-left: 10px"
                                  >非个人类型公众号 ：已认证的公众号，无论企业、媒体、政府或者其他组织类别，在同一自然年内仅能修改
                                  1 次名称；</span
                                >
                              </div>
                            </div>
                            <i class="el-icon-warning color-back f15"></i>
                          </el-tooltip>
                        </div>
                        <div class="info-row" style="padding-left: 10px">
                          <span class="info-value">粉丝数</span>
                          <span class="info-value">{{
                            item.data.fansCount
                          }}</span>
                        </div>
                      </el-col>
                      <el-col :span="6">
                        <div class="info-row">
                          <span
                            class="edit-tag color-back"
                            @click="visitOfficialAccount(item.id)"
                            >进入我的微官网</span
                          >
                        </div>
                        <div class="info-row" style="margin-top: 10px">
                          <span class="info-label">年审时间：</span>
                          <span class="info-value">{{
                            item.data.auditTime
                          }}</span>
                        </div>
                      </el-col>
                    </div>
                  </el-row>
                </div>

                <div
                  v-for="(template, templateIndex) in item.data.myTemplates"
                >
                  <el-row>
                    <div
                      style="
                        display: flex;
                        align-items: center;
                        margin-bottom: 10px;
                      "
                    >
                      <el-col :span="2">
                        <div class="info-row" v-if="templateIndex == 0">
                          <span class="info-label right">我的的模版：</span>
                        </div></el-col
                      >
                      <el-col :span="6">
                        <div class="info-row left">
                          <span class="info-value left">{{
                            template.name
                          }}</span>
                          <el-button
                            style="padding: 0"
                            :class="
                              template.status === 'using'
                                ? 'smill-btn-one'
                                : 'smill-btn-two'
                            "
                            >{{
                              template.status === "using"
                                ? "使用中"
                                : "立即使用"
                            }}</el-button
                          >
                        </div>
                      </el-col>
                      <el-col :span="6">
                        <div class="info-row">
                          <span class="info-label">购买时间：</span>
                          <span class="info-value">{{
                            template.purchaseTime
                          }}</span>
                        </div>
                      </el-col>
                      <el-col :span="8">
                        <div class="info-row">
                          <span class="info-label">到期时间：</span>
                          <span
                            class="info-value"
                            :class="template.needRenew ? 'renew' : ''"
                            >{{ template.expireTime }}</span
                          >
                          <el-button
                            v-if="template.needRenew"
                            class="smill-btn"
                            @click="renewTemplate(company.id, template.id)"
                            >立即续费</el-button
                          >
                          <span
                            v-else
                            class="edit-tag color-back"
                            @click="renewService(company.id, 'pcLink')"
                            >续费：</span
                          >
                          <i
                            v-if="
                              templateIndex == 0 &&
                              item.data.myTemplates.length > 1
                            "
                            @click="
                              toggleTemplateExpand(company, company.templates)
                            "
                            :class="[
                              template.isOpen ? 'el-icon-caret-top' : 'rotate',
                              'f20',
                              'toggle-icon',
                            ]"
                            class="el-icon-caret-top f20"
                          ></i>
                          <!-- <i v-if="templateIndex==0"></i> -->
                        </div>
                      </el-col>
                    </div>
                  </el-row>
                </div>
                <div
                  style="
                    display: flex;
                    align-items: center;
                    margin-bottom: 10px;
                  "
                >
                  <el-col :span="2">
                    <div class="info-row">
                      <span class="info-label right">PC端链接：</span>
                    </div>
                  </el-col>
                  <el-col v-if="!item.data.isOpenPC" :span="6">
                    <span
                      style="padding-left: 10px"
                      class="edit-tag color-back"
                      @click=""
                      >开启我的微官网</span
                    >
                  </el-col>
                  <el-col v-if="item.data.isOpenPC" :span="12">
                    <div class="info-row flex">
                      <span class="info-value"
                        >{{ item.data.pcLink.url }} </span
                      >
                      <span
                        class="edit-tag color-back"
                        @click="openPcLink(company.id)"
                        ><i class="el-icon-warning"></i>点击跳转链接</span
                      >
                      <span
                        class="edit-tag color-back"
                        @click="visitOfficialAccount(company.id)"
                        >进入我的微官网</span
                      >
                    </div></el-col
                  >
                  <el-col v-if="item.data.isOpenPC" :span="8">
                    <div class="info-row">
                      <span class="info-label">访问数：</span>
                      <span class="info-value">{{
                        item.data.pcLink.expireTime
                      }}</span>
                    </div></el-col
                  >
                </div>
                <div
                  class="authorize"
                  style="
                    display: flex;
                    align-items: center;
                    margin-bottom: 10px;
                  "
                >
                  点击授权我的微官网
                </div>
              </div>
            </el-col>

            <!-- 二维码区域 -->
            <el-col :span="7"
              ><div>
                <div class="qrcode-section">
                  <div class="qrcode-content">
                    <div
                      class="qrcode-item"
                      v-for="(customQrcodeConfig, index) in company.qrcodeList"
                    >
                      <div>
                        <QrcodeGenerator
                          ref="customQrcode"
                          :content="customQrcodeConfig.content"
                          :size="customQrcodeConfig.size"
                          :foreground-color="customQrcodeConfig.foregroundColor"
                          :background-color="customQrcodeConfig.backgroundColor"
                          :error-correction-level="
                            customQrcodeConfig.errorCorrectionLevel
                          "
                        />
                      </div>
                      <div class="qrcode-label">
                        {{ customQrcodeConfig.name }}
                      </div>
                      <div class="qrcode-desc">
                        有效期30天，自行<span
                          class="color-back"
                          @click="uploadQrCode(company.id, 'miniProgram')"
                          >上传</span
                        >
                        永久
                      </div>
                    </div>
                  </div>
                </div>
              </div></el-col
            >
          </el-row>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 引入二维码生成组件
import QrcodeGenerator from "@/components/public/QrcodeGenerrator.vue";
export default {
  name: "ManageCenterIndex",
  components: {
    QrcodeGenerator,
  },
  data() {
    return {
      searchKeyword: "",
      // 统计数据
      stats: {
        companyCount: 3,
        totalFans: 2123456,
        templateCount: 5,
      },
      seletedTemplateIndex: false,
      // 企业列表数据
      companies: [
        {
          id: 1,
          name: "北京优易捷科技有限责任公司",
          createTime: "2025-04-05 21:59",
          isAuthorize: true,
          qrcodeList: [
            // 自定义二维码配置
            {
              name: "服务号二维码",
              content: "https://www.ucharts.cn/v2/#/", //
              size: 100, //二维码大小
              foregroundColor: "#333333", //二维码颜色
              backgroundColor: "#ffffff", //二维码背景颜色
              errorCorrectionLevel: "M", //二维码错误 correction level
            },
            {
              name: "订阅号二维码",
              content: "https://www.ucharts.cn/v2/#/", //
              size: 100, //二维码大小
              foregroundColor: "#333333", //二维码颜色
              backgroundColor: "#ffffff", //二维码背景颜色
              errorCorrectionLevel: "M", //二维码错误 correction level
            },
            {
              name: "小程序二维码",
              content: "https://www.ucharts.cn/v2/#/", //
              size: 100, //二维码大小
              foregroundColor: "#333333", //二维码颜色
              backgroundColor: "#ffffff", //二维码背景颜色
              errorCorrectionLevel: "M", //二维码错误 correction level
            },
          ],
          childrenList: [
            {
              type: 1,
              // 服务号-个人
              data: {
                name: "智联科创",
                fansCount: 123456,
                auditTime: "2025/04/05 21:59",
                expireTime: "2025/04/05 21:59",
                type: "服务号-个人",
                isOpenWechart: false,
                isOpenPC: true,
                logoUrl:
                  "https://beihai-food.oss-cn-beijing.aliyuncs.com/pic/avatar.png",
                qrCodeUrl: "@/assets/qrcode_website.png",
                pcLink: {
                  url: "https://example.com/payment-confirm",
                  expireTime: "2025/04/05 21:59",
                  logoUrl:
                    "https://beihai-food.oss-cn-beijing.aliyuncs.com/pic/avatar.png",
                },
                myTemplates: [
                  {
                    id: 1,
                    name: "智慧园区",
                    status: "using",
                    purchaseTime: "2025/04/05 21:59",
                    expireTime: "2025/04/05 21:59",
                    needRenew: true,
                    isOpen: false,
                  },
                  {
                    id: 2,
                    name: "智慧园区",
                    status: "notUsing",
                    purchaseTime: "2025/04/05 21:59",
                    expireTime: "2025/04/05 21:59",
                    needRenew: false,
                    isOpen: false,
                  },
                  {
                    id: 3,
                    name: "智慧园区",
                    status: "notUsing",
                    purchaseTime: "2025/04/05 21:59",
                    expireTime: "2025/04/05 21:59",
                    needRenew: false,
                    isOpen: false,
                  },
                ],
              },
            },
            {
              type: 2,
              // 订阅号-企业
              data: {
                name: "智联科创",
                auditTime: "2025/04/05 21:59",
                expireTime: "2025/04/05 21:59",
                isOpenWechart: false,
                isOpenPC: false,
                type: "订阅号-企业",
                logoUrl:
                  "https://beihai-food.oss-cn-beijing.aliyuncs.com/pic/avatar.png",
                qrCodeUrl: "@/assets/qrcode_service.png",
                pcLink: {
                  url: "https://example.com/payment-confirm",
                  expireTime: "2025/04/05 21:59",
                  logoUrl:
                    "https://beihai-food.oss-cn-beijing.aliyuncs.com/pic/avatar.png",
                },
                myTemplates: [
                  {
                    id: 1,
                    name: "智慧园区",
                    status: "using",
                    purchaseTime: "2025/04/05 21:59",
                    expireTime: "2025/04/05 21:59",
                    needRenew: true,
                    isOpen: false,
                  },
                  {
                    id: 2,
                    name: "智慧园区",
                    status: "notUsing",
                    purchaseTime: "2025/04/05 21:59",
                    expireTime: "2025/04/05 21:59",
                    needRenew: false,
                    isOpen: false,
                  },
                ],
              },
            },
            {
              type: 3,
              // 小程序
              data: {
                name: "智联科创",
                auditTime: "2025/04/05 21:59",
                expireTime: "2025/04/05 21:59",
                isOpenWechart: false,
                isOpenPC: false,
                type: "小程序",
                logoUrl:
                  "https://beihai-food.oss-cn-beijing.aliyuncs.com/pic/avatar.png",
                qrCodeUrl: "@/assets/qrcode_service.png",
                pcLink: {
                  url: "https://example.com/payment-confirm",
                  expireTime: "2025/04/05 21:59",
                  logoUrl:
                    "https://beihai-food.oss-cn-beijing.aliyuncs.com/pic/avatar.png",
                },
                myTemplates: [
                  {
                    id: 1,
                    name: "智慧园区",
                    status: "using",
                    purchaseTime: "2025/04/05 21:59",
                    expireTime: "2025/04/05 21:59",
                    needRenew: true,
                    isOpen: false,
                  },
                ],
              },
            },
          ],
        },
        {
          id: 2,
          name: "北京汇信德科技有限责任公司",
          createTime: "2025-04-05 21:59",
          isAuthorize: false,
          qrcodeList: [
            // 自定义二维码配置
            {
              name: "服务号二维码",
              content: "https://www.ucharts.cn/v2/#/", //
              size: 100, //二维码大小
              foregroundColor: "#333333", //二维码颜色
              backgroundColor: "#ffffff", //二维码背景颜色
              errorCorrectionLevel: "M", //二维码错误 correction level
            },
            {
              name: "订阅号二维码",
              content: "https://www.ucharts.cn/v2/#/", //
              size: 100, //二维码大小
              foregroundColor: "#333333", //二维码颜色
              backgroundColor: "#ffffff", //二维码背景颜色
              errorCorrectionLevel: "M", //二维码错误 correction level
            },
            {
              name: "小程序二维码",
              content: "https://www.ucharts.cn/v2/#/", //
              size: 100, //二维码大小
              foregroundColor: "#333333", //二维码颜色
              backgroundColor: "#ffffff", //二维码背景颜色
              errorCorrectionLevel: "M", //二维码错误 correction level
            },
          ],
          childrenList: [
            {
              type: 1,
              // 服务号-个人
              data: {
                name: "智联科创",
                fansCount: 123456,
                auditTime: "2025/04/05 21:59",
                expireTime: "2025/04/05 21:59",
                type: "服务号-个人",
                isOpenWechart: false,
                isOpenPC: true,
                logoUrl:
                  "https://beihai-food.oss-cn-beijing.aliyuncs.com/pic/avatar.png",
                qrCodeUrl: "@/assets/qrcode_website.png",
                pcLink: {
                  url: "https://example.com/payment-confirm",
                  expireTime: "2025/04/05 21:59",
                  logoUrl:
                    "https://beihai-food.oss-cn-beijing.aliyuncs.com/pic/avatar.png",
                },
                myTemplates: [
                  {
                    id: 1,
                    name: "智慧园区",
                    status: "using",
                    purchaseTime: "2025/04/05 21:59",
                    expireTime: "2025/04/05 21:59",
                    needRenew: false,
                    isOpen: false,
                  },
                ],
              },
            },
            {
              type: 2,
              // 订阅号-企业
              data: {
                name: "智联科创",
                auditTime: "2025/04/05 21:59",
                expireTime: "2025/04/05 21:59",
                isOpenWechart: false,
                isOpenPC: false,
                type: "订阅号-企业",
                logoUrl:
                  "https://beihai-food.oss-cn-beijing.aliyuncs.com/pic/avatar.png",
                qrCodeUrl: "@/assets/qrcode_service.png",
                pcLink: {
                  url: "https://example.com/payment-confirm",
                  expireTime: "2025/04/05 21:59",
                  logoUrl:
                    "https://beihai-food.oss-cn-beijing.aliyuncs.com/pic/avatar.png",
                },
                myTemplates: [
                  {
                    id: 1,
                    name: "智慧园区",
                    status: "using",
                    purchaseTime: "2025/04/05 21:59",
                    expireTime: "2025/04/05 21:59",
                    needRenew: false,
                    isOpen: false,
                  },
                ],
              },
            },
            {
              type: 3,
              // 小程序
              data: {
                name: "智联科创",
                auditTime: "2025/04/05 21:59",
                expireTime: "2025/04/05 21:59",
                isOpenWechart: false,
                isOpenPC: false,
                type: "小程序",
                logoUrl:
                  "https://beihai-food.oss-cn-beijing.aliyuncs.com/pic/avatar.png",
                qrCodeUrl: "@/assets/qrcode_service.png",
                pcLink: {
                  url: "https://example.com/payment-confirm",
                  expireTime: "2025/04/05 21:59",
                  logoUrl:
                    "https://beihai-food.oss-cn-beijing.aliyuncs.com/pic/avatar.png",
                },
                myTemplates: [
                  {
                    id: 1,
                    name: "智慧园区",
                    status: "using",
                    purchaseTime: "2025/04/05 21:59",
                    expireTime: "2025/04/05 21:59",
                    needRenew: true,
                    isOpen: false,
                  },
                ],
              },
            },
          ],
        },
      ],
    };
  },
  computed: {
    // 过滤后的企业列表
    // filteredCompanies() {
    //   if (!this.searchKeyword) {
    //     return this.companies;
    //   }
    //   return this.companies.filter((company) =>
    //     company.name.toLowerCase().includes(this.searchKeyword.toLowerCase())
    //   );
    // },
  },
  methods: {
    // 格式化日期显示
    formatDate(dateString) {
      if (!dateString) return "";
      // 将YYYY-MM-DD HH:mm格式转换为YYYY / MM / DD HH:mm
      return dateString.replace(/(\d{4})-(\d{2})-(\d{2})/, "$1 / $2 / $3");
    },
    // 进入我的微官网
    visitOfficialAccount(companyId) {
      console.log("进入我的微官网，企业ID:", companyId);
      // 这里可以添加进入我的微官网的逻辑
      // 跳转管理我的微官网
      // this.$router.push({
      //   path: "/productOpenwecartAfter/admin/Edit",
      //   query: {
      //     // companyName: this.companyName,
      //     // themeColor: this.selectedThemeColor,
      //   },
      // });
    },
    // 搜索企业
    searchCompanies() {
      // 这里可以添加搜索逻辑，当前通过computed自动过滤
      console.log("搜索企业:", this.searchKeyword);
    },

    // 创建新企业
    createCompany() {
      console.log("创建新企业");
      // 这里可以添加创建企业的逻辑
    },

    // 编辑公众号名称
    editOfficialAccountName(companyId) {
      console.log("编辑公众号名称，企业ID:", companyId);
      // 这里可以添加编辑公众号名称的逻辑
      // 跳转管理我的微官网
      this.$router.push({
        path: "/productOpenwecartAfter/admin/Edit",
        query: {
          // companyName: this.companyName,
          // themeColor: this.selectedThemeColor,
        },
      });
    },

    // 编辑小程序名称
    editMiniProgramName(companyId) {
      console.log("编辑小程序名称，企业ID:", companyId);
      // 这里可以添加编辑小程序名称的逻辑
    },

    // 续费服务
    renewService(companyId, serviceType) {
      console.log(`续费${serviceType}服务，企业ID:`, companyId);
      // 这里可以添加续费服务的逻辑
    },

    // 续费模板
    renewTemplate(companyId, templateId) {
      console.log(`续费模板，企业ID:${companyId}，模板ID:${templateId}`);
      // 这里可以添加续费模板的逻辑
    },

    // 上传logo
    uploadLogo(companyId, serviceType) {
      console.log(`上传${serviceType}Logo，企业ID:`, companyId);
      // 这里可以添加上传logo的逻辑
    },

    // 上传二维码
    uploadQrCode(companyId, serviceType) {
      console.log(`上传${serviceType}二维码，企业ID:`, companyId);
      // 这里可以添加上传二维码的逻辑
    },

    // 打开PC端链接
    openPcLink(companyId) {
      const company = this.companies.find((c) => c.id === companyId);
      if (company && company.pcLink && company.pcLink.url) {
        window.open(company.pcLink.url, "_blank");
      }
    },

    // 管理微信官网
    manageWechatWebsite(companyId) {
      console.log("管理微信官网，企业ID:", companyId);
      // 这里可以添加管理微信官网的逻辑
    },

    // 配置公众号
    configureOfficialAccount(companyId) {
      console.log("配置公众号，企业ID:", companyId);
      // 这里可以添加配置公众号的逻辑
    },
    // 添加切换模板展开/折叠状态的方法
    toggleTemplateExpand(item, templates) {
      console.log(item, templates);
      // 只切换第一个模板的isOpen状态，其他模板根据第一个模板的状态同步更新
      const firstTemplate = templates[0];
      const newState = !firstTemplate.isOpen;

      templates.forEach((template, index) => {
        // 第一个模板的状态作为控制状态
        if (index === 0) {
          template.isOpen = newState;
        } else {
          // 其他模板的状态根据是否展开来设置
          template.isOpen = newState;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.float {
  height: 50px;
  background-color: blue;
  color: #fff;
  position: absolute;
  top: -50px;
}
.float:hover {
  width: 550px;
}
.float-content {
  opacity: 0;
}
.float:hover .float-content {
  opacity: 1;
}
.dashboard-container {
  width: 100%;
  height: 100%;
  background-color: #fff;
  padding: 30px 80px 80px 80px;
  box-sizing: border-box;
  overflow-y: auto;
  .dashboard-content {
    position: relative;
    padding: 30px 40px 40px 40px;
    background-image: url("@/assets/home/admin/home/manage_back.png");
    background-repeat: no-repeat;
    background-size: cover;
    border-bottom: 1px solid #ccc;
    border-radius: 30px;
  }
}

.dashboard-header {
  margin-bottom: 20px;
  h2 {
    font-size: 18px;
    color: #303133;
    font-weight: 600;
    margin: 0;
    display: flex;
    align-items: center;
    i {
      margin-right: 8px;
      color: #409eff;
    }
  }
}

/* 统计卡片样式 */
.stats-summary {
  width: 100%;
  position: absolute;
  top: 80px;
  display: grid;
  grid-template-columns: 1fr 1fr 2fr;
  margin-bottom: 20px;
}

.stat-card {
  padding: 20px;
  position: relative;
  transition: all 0.3s ease;
  // &:hover {
  //   transform: translateY(-2px);
  //   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  // }
  // &.highlight {
  //   background: linear-gradient(135deg, #409eff 0%, #66b1ff 100%);
  //   color: white;
  // }
}

.stat-number {
  font-size: 28px;
  font-weight: 600;
  margin-bottom: 8px;
  margin-top: 20px;
}

.stat-label {
  font-size: 14px;
  opacity: 0.8;
  font-weight: bold;
}

.stat-badge {
  position: absolute;
  top: 10px;
  right: 10px;
}

/* 新建企业按钮区域 */
.create-company-section {
  display: flex;
  gap: 10px;
  align-items: center;
}

.create-btn {
  background: #409eff;
  border-color: #409eff;
}

.search-input {
  width: 200px;
}

/* 企业列表样式 */
.el-icon-caret-top {
  transition: all 0.5s ease; /* 平滑过渡效果 */
  cursor: pointer;
  transform-origin: center; /* 旋转中心点 */
}
.el-icon-caret-top.rotate {
  transform: rotate(180deg);
}
.company-list-container {
  margin-top: 160px;
}
.company-list {
  border-bottom: 1px solid #cccccc;
  padding: 30px 0;
}
.company-info {
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
}
.company-item {
  border: 1px solid #34e61c;
  border-radius: 8px;
  background: #fff;
  display: flex;
  transition: all 0.3s ease;
}

.company-info-section {
  flex: 7;
}

.company-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f0f0f0;
}

.company-title {
  display: flex;
  align-items: center;
  gap: 15px;
}

.company-name {
  font-size: 16px;
  font-weight: 600;
  color: #656565;
}

.create-time {
  font-size: 13px;
  color: #909399;
}

.company-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  position: relative;
}
.qrcode-content {
  display: flex;
  flex-direction: column;
  padding-top: 15px;
}
.account-info.content {
  gap: 0px !important;
  display: grid;
  grid-template-columns: 0fr 1fr;
}
.account-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  .template-list {
    margin-bottom: 20px;
    width: 100%;
    display: flex;
    gap: 16px;
    padding-left: 5px;
  }
}
.info-row.left {
  padding-left: 10px;
}
.authorize {
  font-size: 13px;
  color: #fff;
  border-radius: 6px;
  width: 140px;
  height: 25px;
  display: flex;
  justify-content: center;
  background: #656565;
  cursor: pointer;
}
.info-row.flex {
  padding-left: 15px;
}
.info-row {
  display: flex;
  align-items: center;
  gap: 8px;
  .info-label.left {
    padding-left: 30px;
  }
}
.info-label {
  color: #909399;
  font-size: 13px;
  white-space: nowrap;
}
.info-value {
  color: #303133;
  font-size: 13px;
  padding-right: 10px;
}
.info-value.renew {
  color: #ff5f0a !important;
}
.edit-tag.line::before {
  content: "";
  display: block;
  position: absolute;
  width: 2px;
  height: 13px;
  background-color: #edeff0;
  top: 2px;
}
.edit-tag {
  font-size: 12px;
  color: #409eff;
  cursor: pointer;
}

.vip-badge {
  background: #e6a23c;
  border-color: #e6a23c;
}

.renew-badge {
  background: #409eff;
  border-color: #409eff;
}

.info-link {
  color: #409eff;
  text-decoration: none;
  font-size: 13px;
  &:hover {
    text-decoration: underline;
  }
}

.expire-label {
  font-size: 13px;
  color: #909399;
}

.premium-badge {
  background: #e6a23c;
  border-color: #e6a23c;
}

.open-btn {
  padding: 0;
  height: auto;
  font-size: 13px;
}

/* 模板信息样式 */
.template-info {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.template-item {
  border: 1px solid #ecf5ff;
  border-radius: 6px;
  padding: 10px;
  background: #f0f9ff;
}

.template-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.template-name {
  color: #409eff;
  font-size: 14px;
  font-weight: 500;
}

.template-status {
  color: #67c23a;
  background: #ecfdf5;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
}

.template-details {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.detail-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.detail-label {
  color: #909399;
  font-size: 13px;
  min-width: 80px;
}

.detail-value {
  color: #303133;
  font-size: 13px;
}

.template-renew-badge {
  background: #f56c6c;
  border-color: #f56c6c;
  margin-left: auto;
}

.template-actions {
  margin-top: 8px;
}

.template-action-btn {
  font-size: 13px;
  color: #409eff;
  padding: 0;
  height: auto;
}

/* 二维码区域 */
.qrcode-section {
  flex: 3;
  gap: 0px;
  min-width: 200px;
  display: flex;
  justify-content: flex-end;
}
.qrcode-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  margin-bottom: 20px;
}

.qrcode-img {
  width: 80px;
  height: 80px;
  border: 1px solid #ebeef5;
  padding: 5px;
  border-radius: 4px;
  background: #fff;
}

.qrcode-label {
  font-size: 13px;
  color: #303133;
  font-weight: 500;
}

.qrcode-desc {
  font-size: 11px;
  color: #909399;
  text-align: center;
  line-height: 1.4;
}
// 添加color-back类样式及其hover效果
.color-back {
  color: #409eff; // 设置上传文字的基础颜色
  cursor: pointer; // 鼠标悬停显示指针样式
  transition: all 0.3s ease; // 添加过渡效果
  display: inline-block; // 确保transform效果正常工作

  // hover效果：文字向上移动、背景色变化、文字颜色变化
  &:hover {
    transform: translateY(-2px); // 向上移动2px
    text-shadow: 0 1px 2px rgba(64, 158, 255, 0.3);
  }
  &:active {
    transform: translateY(0) scale(0.95); // 回到原位并轻微缩小
    text-shadow: 0 0 1px rgba(64, 158, 255, 0.5); // 调整文字阴影
  }
}
</style>
